<style>
    .ui-menu {
        border: solid #eee 1px;
        background-color: white;
    }

    .ui-menu .ui-menu-item {
        padding: 0px;
        margin-bottom: 2px;
    }
</style> 

<header>
    <div class="row b-b m-l-none m-r-none bg-white-only">
        <div class="col-sm-4">
            <h3 class="m-t m-b-none">SMS Messaging</h3>
            <p class="block text-muted m-t-xs">BROADCAST LIST MANAGEMENT</p>
        </div>
        <div class="col-sm-8">
            <!-- MINI STATS - Review before deleting permanently -->
            <div class="clearfix m-t-lg m-b-sm pull-right pull-none-xs">
                <div class="pull-left">                  
                    <div class="pull-right m-l-xs">
                        <span class="block">SMS Balance <!--<span class="badge up bg-danger">+5</span>--></span>                    
                        <span class="h4 block text-center" id="sms_account_balance"><?php echo $sms_account['balance']; ?></span>
                        <!--<i class="fa fa-level-up text-success"></i>-->
                    </div>
                    <div class="clear">
                        <i class="fa fa-mobile-phone fa-3x"></i>
                    </div>
                </div>
                <div class="pull-left m-l-lg">
                    <div class="pull-left m-r-xs">
                        <button type="button" class="btn btn-success btn-sm"><i class="fa fa-mobile-phone"></i> Buy Credit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header> 

<section  class="hbox stretch">

    <aside class='aside aside-sm b-r bg-white'>
        <header class='b-b bg-white p-xs'>
            <div class='row'>
                <div class="col-sm-6">
                    <h5 class='font-bold m-l-sm'>Broadcast Lists</h5>
                </div>

                <div class="col-sm-6 text-right">

                </div>
            </div>
        </header>

        <section class="p-xs">
            <div class="panel-group m-b" id="accordion2">
                <div class="panel">
                    <div class="panel-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                            <i class='fa fa-list'></i> Predefined Broadcast Lists
                        </a>
                    </div>
                    <div id="collapseOne" class="panel-collapse in">
                        <div class="panel-body text-sm no-padder">
                            <table class='table table-hover table-bordered table-striped m-b-none'>
                                <thead>
                                    <tr>
                                        <th colspan="3">List Name</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <?php
                                    $count = 1;
                                    if (isset($predefined_lists)) {

                                        foreach ($predefined_lists as $list) {
                                            ?>
                                            <tr>
                                                <td class='text-right' width='40'><?php echo $count++ . '.'; ?></td>
                                                <td>
                                                    <a class='broadcast-list-item block' href="<?php echo $this->Html->url(array('action' => 'broadcast_list_contacts', 'predefined', $list['category_id'], 1)); ?>">
                                                        <?php echo $list['name']; ?>
                                                    </a>
                                                </td>
                                                
                                                <td width='30' class='text-center'>
                                                    <a title='Preview List' href='<?php echo $this->Html->url(array('action' => 'broadcast_list_contacts', 'predefined', $list['category_id'])); ?>' class='btn btn-xs text-xs btn-white broadcast_list_preview' data-category-id='<?php echo $list['category_id']; ?>'><i class='fa fa-search'></i></a>
                                                </td>
                                            </tr>
                                            <?php
                                        }
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading">
                        <div class='row'>
                            <div class="col-sm-6">
                                <a class="accordion-toggle block m-t-xs" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                    <i class='fa fa-list-alt'></i> Custom Broadcast Lists
                                </a>
                            </div>

                            <div class="col-sm-6 text-right">
                                <a id='new_list' href="<?php echo $this->Html->url(array('action' => 'broadcast_list_create')); ?>" 
                                   class="btn btn-sm btn-default m-t-xxs">
                                    <i class='fa fa-plus'></i> New Custom List
                                </a>
                            </div>
                        </div>
                    </div>
                    <div id="collapseTwo" class="panel-collapse in">
                        <div class="panel-body text-sm no-padder">
                            <table class='table table-hover table-bordered table-striped m-b-none'>
                                <thead>
                                    <tr>
                                        <!--<th width='40' class='text-center'><input type='checkbox' class='checkall' /></th>-->
                                        <th colspan="4">List Name</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <?php
                                    if (isset($lists)) {
                                        $count = 1;
                                        foreach ($lists as $list) {
                                            ?> 
                                            <tr>
                                                <td class='text-right' width='40'>
                                                    <!--<input type="checkbox" />-->
        <?php echo $count++ . '.'; ?>
                                                </td>
                                                <td>
                                                    <a class='broadcast-list-item block' href="<?php echo $this->Html->url(array('action' => 'broadcast_list_create', $list['id'])); ?>">
        <?php echo $list['name']; ?>
                                                    </a>
                                                </td>

                                                <td width='30' class='text-center'>
                                                    <a title='Preview List' href='<?php echo $this->Html->url(array('action' => 'broadcast_list_contacts', 'custom', $list['id'])); ?>' class='btn btn-xs text-xs btn-white broadcast_list_preview' data-id='<?php echo $list['id']; ?>'><i class='fa fa-search'></i></a>
                                                </td>

                                                <td width='30' class='text-center'>
                                                    <a href='#' class='btn btn-xs text-xs btn-danger broadcast_list_delete' data-id='<?php echo $list['id']; ?>'><i class='fa fa-times-circle'></i></a>
                                                </td>
                                            </tr>
                                        <?php }
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>



        </section>
    </aside>

    <aside class='aside-xl bg-white'>
        <header class='b-b bg-white p-xs'>
            <h5 class='font-bold m-l-sm'>List Details</h5>
        </header>

        <section id='broadcast-list-contacts' class='col-lg-12 m-t-xs'>
            <div id='instruction' class='col-lg-10 col-lg-offset-1 m-t'>
                <h3>Broadcast List Management Tips</h3>
                
                <div class='row m-t'>
                    <div class='col-sm-2 text-center'>
                        <i class='fa fa-4x fa-info-circle text-info'></i>
                    </div>

                    <div class='col-sm-10 text-sm'>
                        <p>
                            Use this management tool to create and preview custom list of contacts you can send
                            SMS Messages to. All custom lists have dynamic content, and the data grows depending
                            on the size of your membership list and the filter criteria defined.
                        </p>
                    </div>
                </div>

                <div class='row'>
                    <div class='col-sm-2 text-center'>
                        <i class='fa fa-4x fa-list text-info m-t'></i>
                    </div>
                    
                    <div class='col-sm-10 text-sm'>
                        <h5 class='font-bold'>Predefined Lists</h5>
                        <p>
                            These are pre-configured lists you can quickly select and send messages to. These lists
                            are managed by our team and will be updated over time.
                        </p>
                    </div>
                </div>
                
                <div class='row'>
                    <div class='col-sm-2 text-center'>
                        <i class='fa fa-4x fa-list-alt text-info m-t'></i>
                    </div>
                    
                    <div class='col-sm-10 text-sm'>
                        <h5 class='font-bold'>Custom Lists</h5>
                        <p>
                            A custom list is defined by creating rules that are used to filter the data. Rules are
                            either required or optional. Data will be returned that match all the required rules, and 
                            some data will be returned that match the optional rules.
                        </p>
                        
                        <p>An example filter will evaluate to</p>
                        <blockquote class='font-thin text-sm' style='font-family: monospace;'>
                            (Gender = <b>'Female'</b> AND Age <= <b>30</b>) AND <br />
                            (`Phone Number` LIKE <b>'+23324'</b> OR `Phone Number` LIKE <b>'+23354'</b>)
                        </blockquote>
                        <p>
                            This will return all females who are under 30 years and have an MTN Ghana phone number that starts with 
                            +23324 or +23354.
                        </p>
                    </div>
                </div>
            </div>
            
            <div id='editor'>
                
            </div>
        </section>
    </aside>

</section>

<input type="hidden" id="contacts-autocomplete-url" value="<?php echo $this->Html->url(array('controller' => 'sms', 'action' => 'members_list')); ?>" />
<input type='hidden' id='remove_list_url' value='<?php echo $this->Html->url(array('action' => 'broadcast_list_delete')); ?>' />
<input type='hidden' id='remove_filter_url' value='<?php echo $this->Html->url(array('action' => 'broadcast_list_filter_delete')); ?>' />

<?php
echo $this->Html->script('app/views/sms/broadcast_lists.js');
?>